<script setup>
import {ref, defineProps, defineEmits, watch} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";

const emit = defineEmits()
const props = defineProps({
  deleteEventVisiable: Boolean,
  currentEventDetail: Object,
  deleteEventIds:Array
})

const eventId=ref(null);
const Visiable = ref(false)
watch(() => props.deleteEventVisiable, newVal => {
  Visiable.value = newVal;
  if(newVal){
    if(props.currentEventDetail!=null){
      eventId.value=props.currentEventDetail.event.id;
    }else {
      eventId.value=props.deleteEventIds
    }
  }
})
const handleClose = () => {
  emit('close', false);
}

const deleteEvent=()=>{
  axios.delete(`/event/deleteEvent/${eventId.value}`).then(resp=>{
    ElMessage.success(resp.data)
    handleClose()
  }).catch(err=>{
    ElMessage.warning(err.response.data)
  })
}
</script>

<template>
  <el-dialog
      v-model="Visiable"
      title="删除事件"
      width="500"
      @close="handleClose"
  >
    <span v-if="props.currentEventDetail">是否删除该项事件</span>
    <span v-else>是否删除选中事件</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="deleteEvent">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
/* 对话框标题样式 */
.el-dialog__header {
  background-color: #f5f7fa;
  padding: 20px;
  font-size: 18px;
  font-weight: bold;
  border-bottom: 1px solid #ebeef5;
}

/* 对话框内容区域样式 */
.el-dialog__body {
  padding: 20px;
  color: #606266;
  font-size: 14px;
}

/* 对话框底部按钮样式 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  padding: 20px;
  background-color: #fff;
  border-top: 1px solid #ebeef5;
}

.dialog-footer .el-button {
  padding: 10px 20px;
  font-size: 14px;
}

.dialog-footer .el-button--primary {
  background-color: #f56c6c;
  border-color: #f56c6c;
  color: #fff;
}

.dialog-footer .el-button--primary:hover {
  background-color: #f78989;
  border-color: #f78989;
}

.dialog-footer .el-button {
  background-color: #fff;
  border-color: #dcdfe6;
  color: #606266;
}

.dialog-footer .el-button:hover {
  background-color: #f5f7fa;
  border-color: #c0c4cc;
}

/* 提示信息样式 */
.dialog-message {
  font-size: 16px;
  color: #333;
  margin-bottom: 20px;
}

/* 确认按钮的样式，使其更加突出 */
.confirm-button {
  margin-left: 10px;
}
</style>